<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>站点人流量</title>
		<link rel="stylesheet" href="../lib/layui/css/layui.css">
		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
		<link rel="stylesheet" href="../css/index.css" />
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.container {
				width: 100vw;
				height: 100vh;
				box-sizing: border-box;
				padding: 2vh;
			}
			
			.top {
				width: 100%;
				height: 40%;
			}
			
			.bottom {
				width: 100%;
				height:50%;
				display: flex;
			}
			.bottom-left{
				width:60%;
				height:100%;
			}
			.bottom-right{
				width:35%;
				height:100%;
			}
			#allLineEchart {
				width: 100%;
				height: 100%;
			}
			
			#detailedLineEchart {
				width:100%;
				height:70%;
			}
			
			#revenuePie {
				width:100%;
				height:100%;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="top">
				<div id="allLineEchart">

				</div>
			</div>
			<div class="bottom">
				<div class="bottom-left">
					<div class="layui-form">

						<div class="layui-form-item layui-inline">
							<div class="layui-inline">
								<input type="text" class="layui-input" id="test1" name="date">
							</div>
							<div class="layui-input-inline">
								<select id="selectOne" lay-verify="required" lay-filter="route">
									<option value="">请选择地铁线路</option>
									<option value="1">地铁1号线</option>
									<option value="2">地铁2号线</option>
									<option value="3">地铁3号线</option>
									<option value="4">地铁4号线</option>
								</select>
							</div>
							<div class="layui-input-inline">
								<select id="selectTwo" name="stationId" lay-verify="required" lay-filter="station">
									<option value="">请选择地铁站点</option>
								</select>
							</div>
							<button lay-submit lay-filter="*" class="layui-btn layui-btn-normal layui-inline">提交</button>

						</div>

					</div>
					<div id="detailedLineEchart">
					</div>
					

				</div>
				<div class="bottom-right">
					<div id="revenuePie">

					</div>
				</div>
			</div>
		</div>
	</body>

</html>
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../lib/layui/layui.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script>
	var MainLogic = {
		init: function() {
			self = this;
			this.json1 = {
				value: '',
				name: '地铁1号线',
			}
			this.json2 = {
				value: '',
				name: '地铁2号线',
			}
			this.json3 = {
				value: '',
				name: '地铁3号线',
			}
			this.json4 = {
				value: '',
				name: '地铁4号线',
			}
			this.colorData = [{
				Name: '一号线',
				color: '#B35A1F'
			}, {
				Name: '二号线',
				color: '#793E8C'
			}, {
				Name: '三号线',
				color: '#FCD600'
			}, {
				Name: '四号线',
				color: '#CC0000'
			}];
			self.bindEvent();
			self.initPage();
		},
		//初始化列表
		initPage: function() {
			self.events.loadTrafficEchart();
			self.events.loadAllrevenuePie();
		},
		//绑定事件
		bindEvent: function() {

		},
		//事件
		events: {
			loadTrafficEchart: function() {
				$.get("http://159.75.66.230:8080/data/stationInCount", function(data) {
					var stationData = []
					var priceData = []
					$.each(data, function(index, value) {
						stationData.push(value.stationIn)
						priceData.push(value.count)
					})
					var revenueEchart = echarts.init(document.getElementById('allLineEchart'));

					var option = {
						title: {
							text: '2019年12月-2020年7月地铁入站口流量柱状图'
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross',
								crossStyle: {
									color: '#fff'
								}
							}
						},
						grid: {
							left: 45
						},
						xAxis: [{
							type: 'category',
							name: '站点',
							data: stationData,
							axisLabel: {
								textStyle: {
									color: '#fff'
								},
								lineStyle: {
									color: '#979797'

								},

								interval: 0
							},
							nameTextStyle: {
								color: '#000'
							}
						}],
						yAxis: [{
							type: 'value',
							name: '次',

							min: 0,
							max: 50000,
							interval: 5000,

							axisLabel: {
								textStyle: {
									color: '#000'
								},
								lineStyle: {
									color: '#979797'

								}

							},
							nameTextStyle: {
								color: '#000'
							}
						}],
						series: [{
							name: '人次',
							type: 'bar',
							itemStyle: {
								normal: {
									color: "#3C92F0"

								}
							},

							barWidth: 2,
							data: priceData,
						}]
					};
					revenueEchart.setOption(option);
				}, 'json');

			},
			loadSelect: function() {

			},
			loadAllrevenuePie: function() {
				var colors = [];
				var gdata = [];
				$.each(self.colorData, function(index, value) {
					colors.push(value.color);
				});
				$.ajax({
					type: "Get",
					url: "http://159.75.66.230:8080/data/stationInCount",
					async: false,
					dataType: "json",
					success: function(data) {
						var sum1 = 0;
						var sum2 = 0;
						var sum3 = 0;
						var sum4 = 0;
						$.each(data, function(index, value) {
							if(value.route == 1) {
								sum1 = sum1 + value.count
							} else if(value.route == 2) {
								sum2 = sum2 + value.count
							} else if(value.route == 3) {
								sum3 = sum3 + value.count
							} else if(value.route == 4) {
								sum4 = sum4 + value.count
							}
						});
						self.json1.value = sum1
						self.json2.value = sum2
						self.json3.value = sum3
						self.json4.value = sum4

					}
				});
				gdata.push(self.json1)
				gdata.push(self.json2)
				gdata.push(self.json3)
				gdata.push(self.json4)
				var myChart = echarts.init($("#revenuePie")[0]);
				myChart.setOption({
					title: {
						text: '地铁线路入站口人流量分布饼状图',
						left: 'center'
					},
					tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross',
								crossStyle: {
									color: '#fff'
								}
							}
					},
					legend: {
						orient: 'vertical',
						left: 'right',
						icon: "circle",
						y: 'center',
						itemGap: 20,
						formatter: function(name) {
							var clientcounts = 0;
							$.each(gdata, function(index, value) {
								if(name == value.name) {
									clientcounts = value.value;
								}
							});
							return name + "  " + clientcounts + "人次";
						}
					},
					toolbox: {
						show: false,
						feature: {
							saveAsImage: {
								show: true
							}
						}
					},
					color: colors,
					series: [{
						name: '地铁线路',
						type: 'pie',
						radius: '50%',
						center: ['25%', '50%'],
						data: gdata,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)',

							}
						},
						itemStyle: {
							normal: {
								label: {
									show: false //隐藏标示文字
								},
								labelLine: {
									show: false //隐藏标示线
								}
							}
						}
					}]
				});
			},

		}
	};
	layui.use(['laydate', 'form', 'jquery'], function() {
		MainLogic.init();

		var laydate = layui.laydate;
		var form = layui.form;
		var $ = layui.jquery;
		var arr = []
		$.get("http://159.75.66.230:8080/data/stationInCount", {
			'date': '2020-5',
		}, function(data) {
			console.log(data)
		}, 'json');
		form.on('submit(*)', function(data) {
			var date = data.field.date
			var station = data.field.stationId
			$.get("http://159.75.66.230:8080/data/stationInTimeCount", {
				'date': date,
				'station': station
			}, function(data) {
				detailedLineEchart(data, date, station)
			}, 'json');

		});
		laydate.render({
			elem: '#test1',
			value: '2020-5-6',
			done: function(value, date, endDate) {
				console.log(value); //得到日期生成的值，如：2017-08-18
				console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
				console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
			}
		});
		$.ajax({
			type: "Get",
			url: "http://159.75.66.230:8080/data/stationInCount",
			async: false,
			dataType: "json",
			success: function(data) {
				var arr1 = []
				var arr2 = []
				var arr3 = []
				var arr4 = []
				$.each(data, function(index, value) {
					switch(value.route) {
						case 1:
							arr1.push(value.stationIn)
							break;
						case 2:
							arr2.push(value.stationIn)
							break;
						case 3:
							arr3.push(value.stationIn)
							break;
						case 4:
							arr4.push(value.stationIn)
							break;
					}
				});
				arr.push(arr1, arr2, arr3, arr4)
			}
		});
		form.on('select(route)', function(data) {
			switch(data.value) {
				case "1":
					var html = ""
					$.each(arr[0], function(i, v) {
						html = html + "<option value=" + v + ">地铁站" + v + "</option>"
					});
					$("#selectTwo").html(html)
					form.render();
					break;
				case "2":
					$.each(arr[1], function(i, v) {
						html = html + "<option value=" + v + ">地铁站" + v + "</option>"
					});
					$("#selectTwo").html(html)
					form.render();
					break;
				case "3":
					$.each(arr[2], function(i, v) {
						html = html + "<option value=" + v + ">地铁站" + v + "</option>"
					});
					$("#selectTwo").html(html)
					form.render();
					break;
				case "4":
					$.each(arr[3], function(i, v) {
						html = html + "<option value=" + v + ">地铁站" + v + "</option>"
					});
					$("#selectTwo").html(html)
					form.render();
					break;
			}
		});

	});

	function detailedLineEchart(data, time, station) {
		console.log(data)
		var timeData = []
		var countData = []
		var test = []
		for(var i = 0; i < 24; i++) {
			timeData.push(i)
			countData.push(0)
		}
		$.each(data, function(index, value) {
			countData[parseInt(value.inStationTime)] = value.count
		});
		var detailedLineEchart = echarts.init(document.getElementById('detailedLineEchart'));

		var option = {
			title: {
				text: '地铁站' + station + '入站口' + time + '分时流量折线图',
				left: 'center',
				textStyle: {
					color: '#000'
				},
			},
			tooltip: {
				trigger: 'axis'
			},
			grid: {
				left: '0%',
				right: '10%',
				bottom: '5%',
				top: '15%',
				containLabel: true
			},
			toolbox: {
				show: false,
				feature: {
					dataZoom: {
						yAxisIndex: 'none'
					},
					dataView: {
						readOnly: false
					},
					magicType: {
						type: ['line', 'bar']
					},
					restore: {},
					saveAsImage: {}
				}
			},
			xAxis: [{
				type: 'category',
				name: '时',
				data: timeData,
				axisLabel: {
					textStyle: {
						color: '#000'
					},
					lineStyle: {
						color: '#979797'

					},
					nameTextStyle: {
						color: '#fff'
					}

				}

			}],
			yAxis: {
				type: 'value',
				name: '人/次',
				axisLabel: {
					textStyle: {
						color: '#000'
					},
					lineStyle: {
						color: '#979797'

					},
					nameTextStyle: {
						color: '#fff'
					}

				}
			},
			series: [{
				type: 'line',
				itemStyle: {
					normal: {
						color: "#0079FE",
						lineStyle: {
							color: '#0079FE'
						}
					}
				},
				lineWidth: 100,
				data: countData,

			}]
		};
		detailedLineEchart.setOption(option);
	}
</script>